<template>
    <div>
        <el-form ref="form" :model="searchForm" :inline="true">
            <el-form-item>
                <el-input v-model="searchForm.moviename" placeholder="请输入要搜索的电影名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="searchMovieInfo">搜索</el-button>
                <el-input placeholder="请选择开始时间" suffix-icon="el-icon-date" style="width: 200px;margin-left: 10px;">
                </el-input>
                <el-input placeholder="请选择结束时间" suffix-icon="el-icon-date" style="width: 200px;margin-left: 10px;">
                </el-input>
                <el-button type="primary" @click="dialogFormVisible = true" style="margin-left: 10px;">新建</el-button>
                <el-popconfirm title="确认要删除该排片信息吗？" @confirm="deleteMovie">
                    <el-button slot="reference" type="danger" :disabled="deleteAllBtnStu"
                        style="margin-left: 10px;">批量删除</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>

        <!-- 显示用户信息表格 data表格显示的数据 -->
        <el-table v-loading.lock="fullscreenLoading" :data="tableData" border style="width: 100%; margin-bottom: 20px;" :cell-style="{ padding: '2px' }"
            @selection-change="selectionChange">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column label="电影" width="130">
                <template slot-scope="scope">
                    <span>{{ scope.row.movieName }}</span>
                    <br />
                    <el-image style="width: 100px; height: 130px" :src='scope.row.avatar' fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="开放座位" width="100" prop="seatNum">
            </el-table-column>
            <el-table-column label="类型" width="100">
                <template slot-scope="scope">
                    <!-- 取出当前这一行的用户的状态： scope.row.statu -->
                    <!-- <el-tag size="mini" type="success">正常</el-tag> -->
                    <el-tag size="mini" v-if="scope.row.type === 0" type="success">3D</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.type === 1" type="success">2D</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.type === 2" type="success">巨幕观影</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="票房统计" width="100" prop="time">
            </el-table-column>
            <el-table-column label="价格" width="100" prop="price">
            </el-table-column>
            <el-table-column label="放映日期" width="200" prop="date">
            </el-table-column>
            <el-table-column label="开始时间" width="200" prop="startTime">
            </el-table-column>
            <el-table-column label="结束时间" width="200" prop="endTime">
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template slot-scope="scope">
                    <!-- 取出当前这一行的用户的状态： scope.row.statu -->
                    <!-- <el-tag size="mini" type="success">正常</el-tag> -->
                    <el-tag size="mini" v-if="scope.row.statu === 1" type="success">上映</el-tag>
                    <el-tag size="mini" v-else-if="scope.row.statu === 0" type="danger">下架</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="editMovie(scope.row.id)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-popconfirm title="确认要删除该排片信息吗？" @confirm="deleteMovie(scope.row.id)">
                        <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 显示分页页码 -->
        <el-pagination background layout="total,prev,pager,next,jumper" :total="total" :page-size="size"
            :page-sizes="[5, 10, 15, 20, 25]" :current-page="current" @current-change="loadMovieList">
        </el-pagination>

        <!-- 新建用户和编辑用户的对话框 -->
        <el-dialog title="电影信息" :visible.sync="dialogFormVisible" width="600px" :before-close="handleClose">
            <el-form :model="MovieForm" ref="MovieForm" label-width="100px" :rules="rules">
                <el-form-item label="电影图片" label-width="100px">
                    <el-upload class="avatar-uploader" action="/api/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess" headers="headers">
                        <!-- 上传头像成功后，会获得上传图片在服务器上的路径，设置给img标签进行回显 -->
                        <img v-if="MovieForm.avatar" :src="MovieForm.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="电影名" label-width="100px" prop="movieName">
                    <el-input v-model="MovieForm.movieName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="开放座位" label-width="100px" prop="seatNum">
                    <el-input v-model="MovieForm.seatNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="票房统计" label-width="100px" prop="time">
                    <el-input v-model="MovieForm.time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" label-width="100px" prop="price">
                    <el-input v-model="MovieForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" label-width="100px" prop="type">
                    <el-radio-group v-model="MovieForm.type">
                        <el-radio :label="0">3D</el-radio>
                        <el-radio :label="1">2D</el-radio>
                        <el-radio :label="2">巨幕观影</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" prop="statu">
                    <el-radio-group v-model="MovieForm.statu">
                        <el-radio :label="0">禁用</el-radio>
                        <el-radio :label="1">正常</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('MovieForm')">保存用户</el-button>
                    <el-button @click="resetForm('MovieForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            searchForm: {
                moviename: '',
            },
            fullscreenLoading: false,
            dialogFormVisible: false,
            deleteAllBtnStu: true,
            tableData: [],
            total: 0, //分页显示：用户的总记录数
            size: 10, //分页显示：一页显示的记录数
            current: 1,//分页显示：当前显示的页码，就是第几页
            MovieForm: {
                avatar: '',
            },
            headers: {
                token: this.$getSessionStorage('token')
            },
            rules: {
                movieName: [
                    { required: true, message: '请输入电影名', trigger: 'blur' }
                ],
                seatNum: [
                    { required: true, message: '请输入开放座位数', trigger: 'blur' }
                ],
                time: [
                    { required: true, message: '请输入票房统计', trigger: 'blur' },

                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' },

                ],
                type: [
                    { required: true, message: '请选择排片类型', trigger: 'blur' },

                ],
                statu: [
                    { required: true, message: '请选择排片状态', trigger: 'blur' },

                ],
            }
        }
    },
    created() {
        this.loadMovieList(this.current)
    },
    filters: {
        fmtDate: (value) => {
            let date = new Date(value)
            let y = date.getFullYear()
            let M = (date.getMonth() + 1).toString().padStart(2, '0')
            let d = date.getDate().toString().padStart(2, '0')

            let h = date.getHours().toString().padStart(2, '0')
            let m = date.getMinutes().toString().padStart(2, '0')
            let s = date.getSeconds().toString().padStart(2, '0')

            return `${y}年${M}月${d}日 ${h}:${m}:${s}`
        }
    },
    methods: {
        loadMovieList(val) {
            this.openFullScreen1()
            this.tableData=[]
            this.$axios.get('/system/movie/list',{
            })
                .then(response => {
                    for(let i = (val-1)*response.data.data.size;i<val*response.data.data.size;i++){
                        this.tableData.push(response.data.data.records[i])
                        console.log(i);
                    }
                    this.current = val
                    this.total = response.data.data.total
                    this.size = response.data.data.size
                })
        },
        openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 1000);
      },
        selectionChange(value) {
            this.selection = value //selection数组中存放的就是选中所有的用户对象数据
            if (this.selection) {
                //如果seleciton数组中有数据，代表页面上是有选中的用户的，就修改批量删除为可用
                this.deleteAllBtnStu = (this.selection.length === 0) //直接给false，或者判断数组如果长度为0，表示没有数据，赋值true(表示不可用)
            }
        },
        searchMovieInfo() {

        },
        deleteMovie(id) {
            //单个删除用户和批量删除用户
            //如果id有值，表示单个删除，如果id没有值，表示进行批量删除(批量删除用户数据 this.selection)
            let ids = [] // 表示要删除的一组用户的id
            id ? ids.push(id) : this.selection.forEach(u => {
                ids.push(u.id)
            })
            //ids存储就是单个删除的用户ID，或者批量删除的用户ID
            this.$axios.post('/system/movie/delete', ids).then(response => {
                this.$message({
                    message: response.data.message,
                    type: 'success',
                    showClose: true,
                    //定义一个关闭消息框回调，需要重新加载用户的数据
                    onClose: () => {
                        this.loadMovieList()
                    }
                })
            })
        },
        //搜索用户信息
        searchUserInfo() {

        },
        editMovie(id) {
            //使用用户的编号 传递到服务器端，进行查询该用户信息，返回用户信息，回显 保存用户的对话框中
            this.$axios('/movie/movieinfo/' + id).then(response => {
                this.MovieForm = response.data.data //将服务器返回的用户数据赋值给this.UserForm对象
                this.dialogFormVisible = true //显示对话框
            })
        },
        handleClose() {
            //因为对话框中是一个新建用户的表单---关闭对话框前要重置新建用户的表单
            this.resetForm('UserForm')
            this.dialogFormVisible = false
        },
        handleAvatarSuccess() {
            //用户头像上传成功回调函数
        },
        submitForm(formName) {
            this.$refs.MovieForm.validate(valid => {
                if (valid) {
                    //提交保存新建用户数据：不包括用户头像
                    this.$axios.post('/system/movie/' + (this.MovieForm.id ? 'update' : 'save'), this.MovieForm)
                        .then(response => {
                            this.$message({
                                message: response.data.message,
                                type: 'success',
                                showClose: true,
                                onClose: () => {
                                    this.loadMovieList() //新建用户成功后，需要重新加载用户数据
                                    this.dialogFormVisible = false //用户保存成功，对话框隐藏
                                    this.resetForm(formName) //用户保存成功，表单重置
                                }
                            })
                        })
                }
            })
        },
        resetForm(formName) {
            this.MovieForm = {}
        },
        
    },

    components: {

    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #999;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.el-table__body {
  font-size: 14px;
}

.el-button:hover {
  color: #333
}

.el-popconfirm-reference {
  cursor: pointer;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  font-size: 12px;
  padding: 2px 6px;
}

.el-table-column--selection {
  text-align: center;
}

.el-avatar {
  border-radius: 50%;
}

.el-divider {
  margin: 0 6px;
}

/*上传头像*/
/*.avatar-uploader {*/
/*  border: 1px dashed #d9d9d9;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-dialog {
  text-align: center;
}

/* Style the dialog header */
.el-dialog__header {
  background-color: #2f4050;
  color: #fff;
  border-radius: 4px 4px 0 0;
  border-bottom: none;
}

/* Style the dialog title */
.el-dialog__title {
  font-size: 22px;
  font-weight: bold;
  padding: 20px;
}

/* Style the form labels */
.el-form-item__label {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

/* Style the input fields */
.el-input__inner {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
}

/* Style the radio buttons */


.el-radio-button {
  flex: 1;
}

.dialog-footer {
  padding: 20px;
  text-align: right;
  border-top: 1px solid #ebeef5;
  border-radius: 0 0 4px 4px;
}

.dialog-footer .el-button {
  margin-left: 10px;
  border-radius: 4px;
}

.dialog-footer .el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
}

.dialog-footer .el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.dialog-footer .el-button--primary:active {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}

.dialog-footer .el-button--default {
  color: #333;
  border-color: #dcdfe6;
}

.dialog-footer .el-button--default:hover {
  color: #409EFF;
  border-color: #409EFF;
}
</style>